<template>
  <span class="my-tag">
    <span class="my-tag__close is-show" @click="removeMenuTag">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
        <path
          fill="currentColor"
          d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
        ></path>
      </svg>
    </span>
    <span class="my-tag__content" @click="selectMenuTag">{{ data.name }}</span>
  </span>
</template>

<script setup lang="ts">
const props = defineProps<{
  data: any
}>()

const emit = defineEmits<{
  (e: 'remove', data: any): void
  (e: 'select', data: any): void
}>()

const removeMenuTag = () => {
  emit('remove', props.data)
}
const selectMenuTag = () => {
  emit('select', props.data)
}
</script>

<style scoped lang="scss">
.my-tag {
  position: relative;
  cursor: pointer;
  .my-tag__close {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    width: 10px;
    height: 10px;
    padding: 2px;
    background-color: var(--el-color-info-light-5);
    border-radius: 50%;
    &:hover {
      color: #ffffff;
      background-color: var(--el-color-danger);
      border-color: var(--el-color-danger);
    }
  }
  .my-tag__content {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 9px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    background-color: var(--el-color-info-light-9);
    border: 1px solid var(--el-color-info-light-7);
    border-radius: 3px;
    &:hover {
      color: var(--el-color-primary);
      background-color: var(--el-color-primary-light-9);
      border-color: var(--el-color-primary-light-8);
    }
  }
  .is-show {
    display: none;
  }
  &:hover .is-show {
    display: inline-flex;
  }
}
</style>
